<template>
  <!-- 一个div -->
  <VueDraggable
    class="min-h-6 min-w-3 cursor-move"
    :class="[
      { 'border-dashed border border-gray-400 bg-green-200': compInfo.showToolBtn },
      compInfo.configData.classArr
    ]"
    v-model="compInfo.children"
    :animation="150"
    group="people"
    ghostClass="ghost"
    :style="compStyle"
  >
    <DesignCompWrapper v-model="compInfo">
      <template v-for="(item, idx) in compInfo.children" :key="item.flag">
        <RenderComp v-model="compInfo.children[idx]"></RenderComp>
      </template>
    </DesignCompWrapper>
  </VueDraggable>
</template>

<script setup lang="ts">
import { buildBaseConfigStyle } from '@/utils/DesignCompUtil'
import { VueDraggable } from 'vue-draggable-plus'

const compInfo = defineModel<DesignComp>({
  required: true
})
const compStyle = computed(() => {
  const compSettings = compInfo.value.configData
  return buildBaseConfigStyle(compSettings)
})
</script>

<style scoped></style>
